<template>
  <div class="app-container">
    <div class="ver hor-center mg-b-10">
      <div class="match-width">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="回标1" name="2"></el-tab-pane>
          <el-tab-pane label="回标2" name="3"></el-tab-pane>
          <el-tab-pane label="回标3" name="4"></el-tab-pane>
          <el-tab-pane label="回标4" name="5"></el-tab-pane>
          <el-tab-pane label="定标" name="6"></el-tab-pane>
          <el-tab-pane label="实施定标" name="8"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="match-width">
        <div class="hor pd-t15 mg-b-10 ver-center">
          <div class="font16 font-text-color-main-title">供应商方案</div>
          <div class="flex1"></div>
          <div>
            <el-upload
              class="" style="text-align: left"
              action="#"
              slot="reference"
              :auto-upload="false"
              :on-change="importSupplyCompanyScheme"
              :multiple="false"
              :show-file-list="false">
              <el-tooltip class="" effect="light" content="若已上传某个供应商的方案，再次上传会清除原内容" placement="right-start">
                <el-link type="primary" icon="el-icon-upload2" size="mini"
                         loading="onSaveLoading" >上传供应商方案
                </el-link>
              </el-tooltip>
            </el-upload>
          </div>
        </div>
        <div>
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="supplyCompanySchemeBasicList"
            :max-height="autoHeight"
            element-loading-text="Loading"
            border
            width="100%"
            fit
            highlight-current-row
          >
            <el-table-column label="供应商" width="">
              <template slot-scope="scope">
                {{ scope.row.supplyCompanyName }}
              </template>
            </el-table-column>
            <el-table-column label="上传时间" width="140">
              <template slot-scope="scope">
                {{ scope.row.uploadTime }}
              </template>
            </el-table-column>
            <el-table-column label="文件名" width="">
              <template slot-scope="scope">
                {{ scope.row.fileName }}
              </template>
            </el-table-column>
            <el-table-column class-name="" label="操作" align="center" width="">
              <template slot-scope="scope">
                <div class="hor hor-center">
                  <!--                  <el-button type="info" class="pd-lr10" size="mini"-->
                  <!--                             @click.stop="onClickView(scope.row)">详情-->
                  <!--                  </el-button>-->
                  <el-button type="danger" class="pd-lr10" size="mini" :loading="onDeleteLoading"
                             @click.stop="deleteSupplyCompanyScheme(scope.row)">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="match-width pd-tb25">
        <div class="hor pd-t15 mg-b-10 ver-center">
          <div class="font16 font-text-color-main-title">调研项目方案</div>
          <div class="flex1"></div>
          <div>
            <el-upload
              class="" style="text-align: left"
              action="#"
              slot="reference"
              :auto-upload="false"
              :on-change="importProjectScheme"
              :multiple="false"
              :show-file-list="false">
              <el-tooltip class="" effect="light" content="若已上传某个调研项目的方案，再次上传会清除原内容" placement="right-start">
                <el-link type="primary" icon="el-icon-upload2" size="mini"
                         loading="uploadLoading" >上传调研项目方案
                </el-link>
              </el-tooltip>
            </el-upload>
          </div>
        </div>
        <div>
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="projectSchemeBasicList"
            :max-height="autoHeight"
            element-loading-text="Loading"
            border
            width="100%"
            fit
            highlight-current-row
          >
            <el-table-column label="调研项目" width="140">
              <template slot-scope="scope">
                {{ scope.row.assignProjectName }}
              </template>
            </el-table-column>

            <el-table-column label="上传时间" width="140">
              <template slot-scope="scope">
                {{ scope.row.uploadTime }}
              </template>
            </el-table-column>
            <el-table-column label="文件名" width="">
              <template slot-scope="scope">
                {{ scope.row.fileName }}
              </template>
            </el-table-column>
            <el-table-column class-name="" label="操作" align="center" width="">
              <template slot-scope="scope">
                <div class="hor hor-center">
                  <!--                  <el-button type="info" class="pd-lr10" size="mini"-->
                  <!--                             @click.stop="onClickView(scope.row)">详情-->
                  <!--                  </el-button>-->
                  <el-button type="danger" class="pd-lr10" size="mini" :loading="onDeleteLoading"
                             @click.stop="deleteProjectScheme(scope.row)">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>


      <div class="match-width">
        <div class="hor pd-t15 mg-b-10 ver-center">
          <div class="font16 font-text-color-main-title">电力设计方案对比及调研</div>
          <div class="flex1"></div>
          <div>
            <el-upload
              class="" style="text-align: left"
              action="#"
              slot="reference"
              :auto-upload="false"
              :on-change="importInviteTendersScheme"
              :multiple="false"
              :show-file-list="false">
              <el-tooltip class="" effect="light" content="若已上传方案，再次上传会清除原内容" placement="right-start">
                <el-link type="primary" icon="el-icon-upload2" size="mini"
                         loading="uploadLoading" >上传招标方案
                </el-link>
              </el-tooltip>
            </el-upload>
          </div>
          <el-button type="primary" slot="reference" :loading="onSaveLoading" class=" mg-l-10"
                     @click="onClickExportData()">导出
          </el-button>
          <el-button type="primary" icon="" size="mini" class="mg-l-10"
                     @click="fetchData()">刷新
          </el-button>
        </div>

        <table class="cus-table match-width" border="1px">
          <div class="loading-overlay">
            <div class="loading-text">加载中...</div>
          </div>
          <tr>
            <th style="" rowspan="2">类别</th>
            <th style="" rowspan="2">项目</th>
            <th style="" rowspan="2">细项</th>
            <th style="" rowspan="2">招标方案</th>
            <th style="" :colspan="sNames.length">投标方案</th>
            <th style="" rowspan="2">理论最优方案</th>
            <th style="" colspan="3">预估定标方案</th>
            <th style="" :colspan="pNames.length">外部项目调研</th>
          </tr>
          <tr>
            <th style="" v-if="sNames.length == 0"></th>
            <th style="" v-if="sNames.length > 0" v-for="(sTemp, index) in sNames" :key="index">{{ sTemp.sName }}</th>
            <th style="">拟定标方案</th>
            <th style="">评估后拟定标方案-理论最优方案的差异金额</th>
            <th style="">差异分析</th>
            <th style="" v-if="pNames.length == 0"></th>
            <th style="" v-if="pNames.length > 0" v-for="(pTemp, index) in pNames" :key="index">{{ pTemp.pName }}</th>
          </tr>
          <template v-for="(item, index) in contrastSchemeList">
            <tr :key="index">
              <td>
                {{ item.category }}
              </td>
              <td>{{ item.minorItems }}</td>
              <td>{{ item.detailsTerm }} ( {{ item.detailsTerm }})</td>
              <td>
                {{ item.inviteTendersScheme != null ? item.inviteTendersScheme : null }}
              </td>
              <td v-if="sNames.length == 0">
              </td>
              <td v-if="sNames.length > 0" v-for="(sTemp, i) in sNames" :key="i">
                {{ sTemp.sValue[index].detailsContent }}
              </td>
              <td>
                <el-input v-model="item.optimalSolution"  @change="onInputChangeChaYi(item,index)"/>
              </td>
              <td>
                <el-input v-model="item.proposedPlan" @change="onInputChangeChaYi(item,index)"/>
              </td>
              <td>
                <el-input v-model="item.differenceAmount" @change="onInputChangeChaYi(item,index)"/>
              </td>
              <td>
                <el-input v-model="item.differentialAnalysis" @change="onInputChangeChaYi(item,index)"/>
              </td>
              <td v-if="pNames.length == 0">
              </td>
              <td v-if="pNames.length > 0" v-for="(pTemp, i) in pNames" :key="i">
                {{ pTemp.pValue[index].detailsContent }}
              </td>
            </tr>
          </template>
        </table>

        <div>
          <!--          <el-table-->
          <!--            ref="table"-->
          <!--            v-loading="listLoading"-->
          <!--            :data="contrastSchemeList"-->
          <!--            :max-height="autoHeight"-->
          <!--            element-loading-text="Loading"-->
          <!--            border-->
          <!--            width="100%"-->
          <!--            fit-->
          <!--            highlight-current-row-->
          <!--          >-->
          <!--            <el-table-column label="类别" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.category }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="项目" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.minorItems }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="细项" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.detailsTerm }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="招标方案" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.inviteTendersScheme }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="理论最优方案" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.optimalSolution }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="评估后拟定标方案" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.proposedPlan }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="评估后拟定标方案-理论最优方案的差异金额（以市场价测算/万元）" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.differenceAmount }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            <el-table-column label="差异分析" width="140">-->
          <!--              <template slot-scope="scope">-->
          <!--                {{ scope.row.differentialAnalysis }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->


          <!--          </el-table>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCityData} from "@/js/cityData";

const requestSupplier = require('@/api/project/supplyCompany')
const request = require('@/api/project/biddingCompany')
const requestContrastScheme = require('@/api/comprehensive/contrastScheme')
const requestSupplyCompanyScheme = require('@/api/comprehensive/supplyCompanyScheme')
const requestProjectScheme = require('@/api/comprehensive/projectScheme')
export default {
  name: "companyScheme.vue",
  data() {
    return {
      activeName: "2",
      allList: [],
      pNames: [],
      sNames: [],
      contrastSchemeList: [],
      projectSchemeList: [],
      supplyCompanySchemeList: [],
      projectSchemeBasicList: [],
      supplyCompanySchemeBasicList: [],
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      listLoading: false,
      onSaveLoading: false,
      uploadLoading: false,
      onDeleteLoading: false,
      areaData: [],

    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
    this.projectInfo = JSON.parse(this.$route.query.projectInfo)
  },
  mounted() {
    this.areaData = getCityData()
    this.fetchData()
    this.getSupplyCompanyScheme()
    this.getProjectScheme()
    //去掉第三级的信息
    for (let i = 0; i < this.areaData.length; i++) {
      if (this.areaData[i].children != null && this.areaData[i].children.length > 0) {
        for (let j = 0; j < this.areaData[i].children.length; j++) {
          this.areaData[i].children[j].children = null
        }
      }
    }
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getJieDuanName(value) {
      switch (value) {
        case 1:
          return "标底";
        case 2:
          return "回标1";
        case 3:
          return "回标2";
        case 4:
          return "回标3";
        case 5:
          return "回标4"
        case 6:
          return "定标"
        case 7:
          return "实施标底"
        case 8:
          return "实施定标"
        default:
          return "";
      }
    },
    handleClick() {
      this.fetchData()
      this.getSupplyCompanyScheme()
      this.getProjectScheme()
    },
    getProjectScheme() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id)
      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestProjectScheme.getProjectScheme(data).then(response => {
        this.projectSchemeBasicList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },
    getSupplyCompanyScheme() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id)
      data.append('jieDuan', this.activeName)
      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestSupplyCompanyScheme.getSupplyCompanyScheme(data).then(response => {
        this.supplyCompanySchemeBasicList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },
    fetchData() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id)
      data.append('jieDuan', this.activeName)
      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestContrastScheme.getContrastScheme(data).then(response => {
        // this.allList = response.data
        this.contrastSchemeList = response.data.contrastSchemeList
        this.projectSchemeList = response.data.projectSchemeList
        this.supplyCompanySchemeList = response.data.supplyCompanySchemeList
        this.pNames = response.data.pNames
        this.sNames = response.data.sNames
        this.total = response.totalElements
        this.listLoading = false

        var loadingOverlay = document.querySelector('.loading-overlay');
        if (loadingOverlay) {
          loadingOverlay.style.display = 'none';
        }
      })
    },

    importSupplyCompanyScheme(file) {
      if (this.projectInfo.id == null || this.projectInfo.id == "" || this.projectInfo.id == undefined) {
        this.$message({
          message: '项目信息缺失，请重试或联系管理员',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.uploadLoading = true;
      this.$message({
        message: '上传中，分析时间可能比较久，请耐心等待',
        type: 'warning'
      })
      const data = new FormData();
      data.append('file', file.raw);
      data.append('projectId', this.projectInfo.id);
      data.append('jieDuan', this.activeName);
      requestSupplyCompanyScheme.importSupplyCompanyScheme(data, function (percent) {
        console.log(percent)
      }).then(response => {
        this.uploadLoading = false;
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.uploadLoading = false;
        this.getSupplyCompanyScheme()
        this.fetchData()
      }).catch((e) => {
        this.uploadLoading = false;
      })
    },
    importProjectScheme(file) {
      if (this.projectInfo.id == null || this.projectInfo.id == "" || this.projectInfo.id == undefined) {
        this.$message({
          message: '项目信息缺失，请重试或联系管理员',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.uploadLoading = true;
      this.$message({
        message: '上传中，分析时间可能比较久，请耐心等待',
        type: 'warning'
      })
      const data = new FormData();
      data.append('file', file.raw);
      data.append('projectId', this.projectInfo.id);
      requestProjectScheme.importProjectScheme(data, function (percent) {
        console.log(percent)
      }).then(response => {
        this.uploadLoading = false;
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.uploadLoading = false;
        this.getProjectScheme()
        this.fetchData()
      }).catch((e) => {
        this.uploadLoading = false;
      })
    },
    importInviteTendersScheme(file) {
      if (this.projectInfo.id == null || this.projectInfo.id == "" || this.projectInfo.id == undefined) {
        this.$message({
          message: '项目信息缺失，请重试或联系管理员',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.uploadLoading = true;
      this.$message({
        message: '上传中，分析时间可能比较久，请耐心等待',
        type: 'warning'
      })
      const data = new FormData();
      data.append('file', file.raw);
      data.append('projectId', this.projectInfo.id);
      requestContrastScheme.importInviteTendersScheme(data, function (percent) {
        console.log(percent)
      }).then(response => {
        this.uploadLoading = false;
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.uploadLoading = false;
        this.fetchData()
      }).catch((e) => {
        this.uploadLoading = false;
      })
    },
    deleteSupplyCompanyScheme(row) {
      this.$confirm('是否确定删除', '提示', {
        showCancelButton: true,
        confirmButtonText: "删除"
      })
        .then(_ => {
          this.onDeleteLoading = true;
          const data = new FormData()
          data.append('projectId', row.project.id)
          data.append('supplyCompanyName', row.supplyCompanyName)
          data.append('jieDuan', row.jieDuan)
          //删除数据
          requestSupplyCompanyScheme.conditionDelete(data).then(response => {
            this.onDeleteLoading = false;
            this.$message({
              message: "删除成功",
              type: 'success',
              duration: 3000
            })
            this.getSupplyCompanyScheme()
            this.fetchData()
          })
          this.onDeleteLoading = false;
        })
        .catch(_ => {
          this.onDeleteLoading = false;
        });
    },
    deleteProjectScheme(row) {
      this.$confirm('是否确定删除', '提示', {
        showCancelButton: true,
        confirmButtonText: "删除"
      })
        .then(_ => {
          this.onDeleteLoading = true;
          const data = new FormData()
          data.append('projectId', row.project.id)
          data.append('assignProjectName', row.assignProjectName)
          //删除数据
          requestProjectScheme.conditionDelete(data).then(response => {
            this.onDeleteLoading = false;
            this.$message({
              message: "删除成功",
              type: 'success',
              duration: 3000
            })
            this.getProjectScheme()
            this.fetchData()
          })
          this.onDeleteLoading = false;
        })
        .catch(_ => {
          this.onDeleteLoading = false;
        });
    },
    onInputChangeChaYi(row){
      this.onSaveLoading = true
      const data = new FormData();
      data.append('json', JSON.stringify(row));
      //修改实测高程
      requestContrastScheme.saveByJson(data).then(response => {
        this.onSaveLoading = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },

    onClickExportData() {
        window.open(process.env.VUE_APP_BASE_API + "/mgt/contrastScheme/exportScheme?projectId=" + this.projectInfo.id + "&jieDuan="+this.activeName)
    },

  }
}
</script>

<style scoped>
.cus-table {
  border-collapse: collapse;
  text-align: center;
}

.cus-table td, .cus-table th {
  border: 1px solid #cad9ea;
  color: #424242;
  height: 50px;
}

.cus-table th {
  background-color: #EFEFEF;
  width: 100px;
  color: #414141;
  font-size: 14px;
}


.cus-table.match-width {
  position: relative;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.loading-text {
  font-size: 20px;
  font-weight: bold;
}
</style>
